
<template>
  <el-container>
    <!-- header 的开始 -->
    <el-header style="background-color:#eff2f7" class="top">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>设置</el-breadcrumb-item>
        <el-breadcrumb-item>管理员设置</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- header右侧头像开始 -->
      <div class="block">
        <el-avatar :size="50" :src="circleUrl"></el-avatar>
        <div class="poputs">
          <div @click="tzHome">首页</div>
          <div @click="tzLogin">退出</div>
        </div>
      </div>
      <!-- header右侧头像结束 -->
    </el-header>
    <!-- header 的结束 -->
    <!-- main的开始 -->
    <el-main style="background-color:#ccc">
      <div class="contenr">
        <h1>管理员信息</h1>
        <div class="message">
          <p>姓名：</p>
          <p>注册时间：</p>
          <p>管理员权限：</p>
          <p>管理员ID：</p>
          <p>
            管理员头像：
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <img src="https://elm.cangdu.org/img/default.jpg" alt />
            </el-upload>
          </p>
        </div>
      </div>
    </el-main>
    <!-- main的结束 -->
  </el-container>
</template>
<script>
// import setting from "./setting";
export default {
  data() {
    return {
      imageUrl: "",
      circleUrl:
        "https://img01.sogoucdn.com/app/a/100520093/fb41c7c77a2454f7-01eba5833e7e38bc-11cc0200d4b834a0dddb28091fd46806.jpg",
    
    }
  },
  methods: {
    tzHome(){
      this.$router.push({path:'/home'});
    },
    tzLogin(){
      this.$router.push({path:'/login'});
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  // mxins: [setting],
};
</script>
  
<style scoped>
.block {
  position: relative;
}
.poputs {
  position: absolute;
  top: 55px;
  left: -20px;
  width: 80px;
  height: 60px;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 2px 3px 10px -1px #333;
  display: none;
  z-index: 999;
}
.block:hover .poputs {
  display: block;
}
.poputs > div {
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #000;
  cursor: pointer;
}
.poputs > div:hover {
  background-color: #e4e8f1;
  color: #333;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-dropdown-item {
  width: 100px;
  text-align: center;
}
.contenr h1 {
  margin: 50px;
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/* 信息框 */

.message {
  border-radius: 20px;
  padding: 30px;
  margin: 0 auto;
  min-height: 450px;
  width: 600px;
  background: rgb(249, 252, 250);
}
.message p {
  margin-bottom: 50px;
}

/* 点击上传头像 */
/* .avatar-uploader  */
.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/* .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  } */
/* .avatar {
    width: 178px;
    height: 178px;
    display: block;
  } */
.avatar-uploader img {
  display: block;
  width: 120px;
  height: 120px;
}
</style>

